---
import type { ImageMetadata } from 'astro'
import { Image } from 'astro:assets'
import type { HTMLTag, Polymorphic } from 'astro/types'

import { cn } from 'astro-pure/utils'

type Props<Tag extends HTMLTag> = Polymorphic<{ as: Tag }> & {
  heading: string
  subheading: string
  imagePath: string
  altText?: string
  href?: string
  class?: string
}

const {
  as: Tag = 'a',
  class: className,
  href,
  heading,
  subheading,
  imagePath,
  altText
} = Astro.props
const images = import.meta.glob<{ default: ImageMetadata }>(
  '/src/assets/projects/*.{jpeg,jpg,png,gif,avif.webp}'
)
if (!images[imagePath])
  throw new Error(
    `"${imagePath}" does not exist in glob: "src/assets/projects/*.{jpeg,jpg,png,gif,avif.webp}"`
  )
---

<Tag
  class={cn(
    className,
    'project-card group overflow-hidden relative flex flex-col gap-y-3 rounded-2xl border bg-muted ',
    href && 'transition-all hover:border-foreground/25 hover:shadow-sm'
  )}
  href={href}
  target='_blank'
>
  <Image
    src={images[imagePath]()}
    alt={altText ?? heading}
    class='absolute top-0 h-36 w-full object-cover opacity-60 transition-opacity group-hover:opacity-100 dark:opacity-35'
    loading='lazy'
  />
  <div class='project-card-fg z-10 flex flex-col gap-y-0.5 px-5 pb-4 pt-24 transition-all'>
    <h2 class='text-lg font-medium'>{heading}</h2>
    <p class='text-muted-foreground'>{subheading}</p>
  </div>
  <slot />
</Tag>

<style>
  .project-card-fg {
    --un-gradient-shape: to bottom in oklch;
    --un-gradient: var(--un-gradient-shape), var(--un-gradient-stops);
    --un-gradient-from-position: 0%;
    --un-gradient-from: transparent var(--un-gradient-from-position);
    --un-gradient-to-position: 65%;
    --un-gradient-to: hsl(var(--primary-foreground) / var(--un-to-opacity, 1))
      var(--un-gradient-to-position);
    --un-gradient-stops: var(--un-gradient-from), var(--un-gradient-to);
    background-image: linear-gradient(var(--un-gradient));
  }

  .project-card:hover .project-card-fg {
    --un-gradient-to-position: 80%;
  }
</style>
